<template>
  <div id="home">
    <NavBar class="home-nav">
      <template v-slot:center
        ><span class="home-nav-center">购物街</span></template
      >
    </NavBar>
    <TabControl
      :titles="['流行', '新款', '精选']"
      class="tab-control tab-control-copy"
      @itemClick="TabControlClick"
      v-show="isTabControlCopyShow"
      ref="TabControlCopy"
    ></TabControl>
    <BScroll
      ref="BScroll"
      :probeType="2"
      :pullUpLoad="true"
      @BScroll="contentScroll"
      @pullingUp="loadMore"
      class="BScroll"
    >
      <!--    swiper轮播图-->
      <swiper
        :options="swiperOption"
        class="home-swiper"
        v-if="banners.length > 0"
      >
        <swiper-slide v-for="item in banners" :key="item.image"
          ><a :href="item.link"
            ><img :src="item.image" alt="" @load="imgLoad" /></a
        ></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <RecommendView :recommends="recommends"></RecommendView>
      <FeatureView class="home-feature"></FeatureView>
      <TabControl
        :titles="['流行', '新款', '精选']"
        class="tab-control"
        @itemClick="TabControlClick"
        ref="TabControl"
      ></TabControl>
      <GoodsList :goods="goods[currentType].list"></GoodsList>
    </BScroll>
    <BackTop @click.native="backClick" v-show="isShowBackTop"></BackTop>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import BScroll from "@/components/common/bscroll/BScroll";
import BackTop from "@/components/content/backTop/BackTop";

import RecommendView from "@/views/home/childComps/RecommendView";
import FeatureView from "@/views/home/childComps/FeatureView";

import { getHomeMultidata, getHomeGoods } from "@/network/home";
import "swiper/swiper-bundle.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "Home",
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
      },
      currentType: "pop",
      TypeY: {
        pop: 0,
        new: 0,
        sell: 0,
      },
      isShowBackTop: false,
      isTabControlCopyShow: false,
      isImgLoad: true, //节流,判断图片是否加载完成,一张加载完成即可
      tabOffsetTop: 0,
    };
  },
  components: {
    NavBar,
    TabControl,
    GoodsList,
    BScroll,
    BackTop,
    RecommendView,
    FeatureView,
    swiper,
    swiperSlide,
  },
  created() {
    this.getHomeMultidata();
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  methods: {
    TabControlClick(index) {
      if (this.$refs.BScroll.scroll.y > -(this.tabOffsetTop - 44)) {
        this.TypeY[this.currentType] = -(this.tabOffsetTop - 44);
      } else {
        this.TypeY[this.currentType] = this.$refs.BScroll.scroll.y;
      }
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.BScroll.scrollTo(0, this.TypeY[this.currentType], 0);
      this.$refs.TabControlCopy.currentIndex = index; //两个TabControl的currentIndex应该一致
      this.$refs.TabControl.currentIndex = index; //两个TabControl的currentIndex应该一致
    },
    backClick() {
      this.$refs.BScroll.scrollTo(0, 0, 700);
    },
    contentScroll(position) {
      this.isShowBackTop = -position.y > 1000;
      this.isTabControlCopyShow = this.tabOffsetTop <= -position.y + 44; //44是home-nav的高
    },
    loadMore() {
      this.getHomeGoods(this.currentType);
    },
    imgLoad() {
      if (this.isImgLoad) {
        this.tabOffsetTop = this.$refs.TabControl.$el.offsetTop;
        for (let i in this.TypeY) {
          this.TypeY[i] = -(this.tabOffsetTop - 44);
        }
      }
      this.isImgLoad = false;
    },
    /**
     * 网络请求相关方法
     */
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page++;
        setTimeout(() => {
          if (this.$refs.BScroll) {
            this.$refs.BScroll.finishPullUp();
          }
        }, 2000);
      });
    },
  },
  destroyed() {
    console.log("销毁");
  },
  activated() {
    this.$refs.BScroll.scroll.refresh;
  },
};
</script>

<style scoped>
.home-nav {
  background-color: var(--color-tint);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.home-nav-center {
  color: #ffffff;
}
.swiper-container {
  --swiper-theme-color: red;
  /*--swiper-pagination-color: #00ff33; !* 两种都可以 *!*/
}

.home-swiper {
  width: 100%;
  height: 190px;
  /*padding-top: 44px;*/
}

.home-swiper img {
  width: 100%;
}
.br {
  padding-bottom: 700px;
}
.tab-control {
  position: sticky;
  top: 44px;
  background-color: #ffffff;
  z-index: 6;
}
.tab-control-copy {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 999;
}
.BScroll {
  /*overflow: hidden;*/
  height: calc(100vh - 44px - 48px);
  margin-top: 44px;
}
</style>
